<template>
  <div>
      <el-container class="home-con">
          <!-- 主框架头部 -->
          <el-header class="home-head">
              <span>****系统管理平台</span>
              <div>
                  <el-badge style="display:flex; align-center; margin-right:7px"></el-badge>
                  <el-dropdown style="display: flex; align-items: center;">
                      <span class="home-user" style="align-items: center;">用户姓名
                          <i><img
                                  style="width: 40px; height: 40px; margin-right: 5px;margin-left:5px ; border-radius: 1px;" /></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>个人中心</el-dropdown-item>
                          <el-dropdown-item>设置</el-dropdown-item>
                          <el-dropdown-item>注销</el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>
              </div>
          </el-header>
          <el-container>
              <!-- 导航 -->
              <el-aside style="width: 180px;background-color: #ececec;">
                  <div style="display: flex; justify-content: flex-start; width: 180px;text-align: left;">
                      <el-menu style="background-color: #ececec; width: 180px;">
                          <el-menu-item index="1-1" @click="$event => goto('/home')">
                              <i class="el-icon-s-home"></i>
                              <span>主页</span>
                          </el-menu-item>
                          <el-submenu index="2-1">
                              <template slot="title"><i class="el-icon-user"></i>人员管理</template>
                              <el-menu-item index="2-1-1" @click="$event => goto('/empList')">
                                  <i class=""></i>
                                  <span>正式员工</span>
                              </el-menu-item>
                              <el-menu-item index="2-1-2" @click="$event => goto('/shi')">
                                  <i></i>
                                  <span>实习生</span>
                              </el-menu-item>
                          </el-submenu>
                          <el-menu-item index="3-1" @click="$event => goto('/sys')">
                              <i class="el-icon-setting"></i>
                              <span>系统管理</span>
                          </el-menu-item>
                      </el-menu>
                  </div>
              </el-aside>
              <!-- 工作区域 -->
              <el-main>
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                      <el-breadcrumb-item>首页</el-breadcrumb-item>
                      <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                  </el-breadcrumb>

                  <keep-alive>
                      <router-view v-if="this.$route.meta.keepAlive"></router-view>
                  </keep-alive>
                  <router-view v-if!="this.$route.meta.keepAlive"></router-view>
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>
<script>
export default {
  name: 'home',
  data() {
      return {
          router: []
      }
  },
  computed: {
      routes() {
          return ''
      }
  },
  methods: {
      goto(url) {
          console.log(url);
          this.$router.replace(url)
      }
  }
}
</script>
<style scoped>
.home-con {
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.home-head {
  background-color: #20a0ff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: content-box;
  padding: 0px;
}

.home-user {
  width: 180px;
  min-width: 175px;
}
</style>
